<template>
    <section class="content">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="~path_img/banner.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="~path_img/banner1.jpg" alt=""></van-swipe-item>
        </van-swipe>
<!--        <article class="top"><span style="color: #F75123;font-size: .4rem;">Hi~</span> 新同学</article>-->
        <section id="list">
            <h5><img src="~path_img/titile.png" alt=""></h5>
            <van-empty
                    class="custom-image"
                    image-size="160px"
                    description="暂无数据"
                    v-if="list.length <= 0"
            />
            <section v-else>
                <section class="list" v-for="item in list">
                    <h6>{{item.name}} - {{item.pdf}}</h6>
                    <article class="list-bottom">
                        <span>{{item.updated_at}}</span>
                        <i @click="download(item)">下载PDF</i>
                    </article>
                </section>
            </section>
        </section>

        <bottom></bottom>

        <van-action-sheet v-model="show" title="请输入邮箱" @close="close_email()">
            <div class="fasongyouxiang">
                <textarea placeholder="请输入您的邮箱" v-model="email"></textarea>
                <van-button type="primary" block color="#F5BB19" @click="fasong()">发送邮件</van-button>
            </div>
        </van-action-sheet>

    </section>
</template>

<script>
    import bottom from "@/components/bottom";
    import { Swipe, SwipeItem, Empty, ActionSheet} from 'vant';
    export default {
        name: "index",
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Empty.name]: Empty,
            [ActionSheet.name]: ActionSheet,
            bottom,
        },
        data() {
            return {
                show: false,
                list : [],
                ios_and : this.$common.appSource(),
                is_wx: this.$common.isWeiXin(),
                email: this.$store.state.email,
                email_item: [],
                merId: this.$store.state.merId
            }
        },
        mounted() {
            this.get_list()
        },
        methods: {
            close_email(){
                this.email_item = [];
            },
            fasong(item){
                let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                if(this.email == ''){
                    this.$toast('请输入邮箱');
                }
                else if(!reg.test(this.email)){
                    this.$toast('请输入正确的邮箱');
                }
                else{
                    this.$https.fetchGet('/sms_email?id=' + this.email_item.id + '&email=' + this.email + '&merId=' + this.merId).then( res => {
                        if(res.code == 0){
                            this.$store.commit('email',this.email)

                            this.$toast(res.msg);
                            this.show = false;
                            this.close_email();
                        }
                    })
                }
            },
            download(item){
                if(this.merId || (this.ios_and == 'ios' && !this.is_wx)){
                    this.show = true;
                    this.email_item = item;
                }
                else{
                    if(this.ios_and == 'ios' || (this.ios_and == 'andriod' && !this.is_wx)){
                        this.$https.fetchGet_pdf('/download_pdf?id=' + item.id +'&cc='+Math.random(0,100) + '&type=m').then( res => {
                            if(res.data.type == 'application/json'){
                                this.$toast('非法下载')
                            }
                            else{
                                // const blob = res.data;
                                const blob = new Blob([res.data], { type: 'application/pdf'});
                                const link = document.createElement('a');
                                console.log(blob)
                                link.href = window.URL.createObjectURL(blob);
                                link.download = item.pdf;
                                document.body.appendChild(link);
                                link.click();
                                window.URL.revokeObjectURL(link.href)
                            }

                        })
                    }
                    else{
                        this.$router.push('/anzhuo?token=' + this.$store.state.token + '&id=' + item.id + '&pdf=' + window.encodeURI(item.pdf))
                    }
                }



            },
            get_list(){
                this.$https.fetchGet('/index_list',{}).then(res => {
                    this.list = res.data
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .fasongyouxiang{
        padding: 0 .3rem .3rem;
        textarea{
            padding: .3rem;
            border:#ccc 1px solid;
            width: 100%;
            font-size: .4rem;
        }
    }
    /*#alert{*/
    /*    position: fixed;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    display: flex;*/
    /*    align-items: center;*/
    /*    justify-content: center;*/
    /*    background: rgba(0,0,0,.2);*/
    /*    .alert{*/
    /*        font-size: .42rem;*/
    /*        border-radius: .2rem;*/
    /*        width: 90%;*/
    /*        background: #fff;*/
    /*        padding:.4rem .5rem;*/
    /*        input{*/
    /*            padding: 0 .4rem;*/
    /*            width: 100%;*/
    /*            line-height: .8rem;*/

    /*        }*/
    /*        .alert_bottom{*/
    /*            display: flex;*/
    /*            justify-content: space-between;*/
    /*            span{*/
    /*                width: 3rem;*/
    /*                line-height: .5rem;*/
    /*                background: #F5BB19;*/
    /*                display: block;*/
    /*                color: #fff;*/
    /*            }*/
    /*        }*/
    /*    }*/
    /*}*/
.content{
    .my-swipe{
        width: 100%;
        img{
            width: 100%;
        }
    }
    .top{
        padding: 0 .4rem;
        text-align: left;
        font-weight: bold;
        font-size: .38rem;
    }
    #list{
        padding: 0 .5rem;
        & > h5{
            img{
                width: 6rem;
            }
        }
        .list{
            background-color: #fff;
            border-radius: .1rem;
            box-shadow: 0 0 10px rgba(0,0,0,.3);
            text-align: left;
            padding: .5rem .3rem .45rem;
            margin-top: .5rem;
            h6{
                font-size: .42rem;
                line-height: 1.5;
                margin-bottom: .4rem;
            }
            article{
                display: flex;
                font-size: .34rem;
                align-items: center;
                justify-content: space-between;
                span{

                }
                i{
                    background-color: #F5BB19;
                    color: #fff;
                    padding: .1rem .2rem;
                    border-radius: 2px;
                }
            }
        }
    }
}
</style>
<style>
    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }
</style>
